<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[[${title}]]</title>
    <style>
        /*样式确定后会手动嵌入到标签里面，不要担心*/
        /*样式确定后会手动嵌入到标签里面，不要担心*/
        body {
            margin: 0;
            padding: 0;
            background-color: #F4F7FA;
            font-family: Arial, sans-serif;
        }

        .wrapper {
            max-width: 680px;
            margin: 20px auto;
            background: #FFFFFF;
            border-radius: 8px;
            box-shadow: 4px 8px 16px 10px rgb(0 0 0 / 14%)
        }

        .header {
            background-color: #007BFF;
            color: #FFFFFF;
            text-align: center;
            padding: 20px 0;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;

        }

        .header h1 {
            flex-grow: 1;
            margin: 0;
            font-size: 24px;
        }

        .content {
            padding: 20px;
            text-align: center;

            background: linear-gradient(135deg, #ebedf4, #f3f1f6e5, #f8eeeef3);
        }

        .content h2 {
            color: #333333;
            font-size: 20px;
            max-height: 18px;
        }

        .content p {
            color: #666666;
            line-height: 1.5;
        }

        .right {

            background-color: par(255, 255, 255, 0.01);
            color: #999999;
            text-align: right;
            padding: 20px;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            font-size: 12px;
            max-height: 7px;
        }

        .right p {
            margin: 0;
            font-size: 14px;
        }



        .footer {
            background-color: #F4F7FA;
            text-align: center;
            padding: 15px 20px;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            font-size: 12px;
            color: #999999;
        }

        .header img {
            width: 40px;
            height: 40px;
            text-align: left;
            margin-right: 8px;
            border-radius: 100%;
            position: absolute;
            left: 3%;

        }

        .content-right {
            background: linear-gradient(135deg, #b4d6f96b, #e9dfff, #f8d8d8);
        }
    </style>
</head>

<body>
<div class="wrapper">

    <div class="header">
        <h1>👋Topc OJ系统 || [[${type}]]初始密码发送</h1>
    </div>
    <div class="crontent-right">
        <div class="content">
            <h2>🎉亲爱的 [[${name}]] 用户，您好!</h2>
            <p>🚀感谢您加入OJ系统！您的账号已准备完毕，请使用下面的初始密码进行登录:</p>
            <p style="font-size: 35px;"><strong>[[${password}]]</strong></p>
            <p>如果您有什么疑问，可以随时联系管理员：Email: Topc_Club@163.com</p>

            <div class="right">
                <p>OJ|学科竞赛</p>
                <p>[[${date}]]</p>
            </div>
        </div>

    </div>

    <div class="footer">
        📧本邮件系统自动发送，请勿回复!<br>
        请保管好您的邮箱，避免账号被他人盗用<br>
        copyright &copy; 2024 Topc OJ. All Rights Reserved

    </div>
</div>
</body>

</html>